<!--
 * @Description: * 
 * @Date: 2020-12-27 17:07:18
 * @LastEditTime: 2021-01-10 22:01:38
 * @Author: Ji YingHao
 * @FilePath: /nuxt-app/components/Logging.vue
-->
<template>
  <div class="logging">
    <Modal
      title="立即注册"
      v-model="modal11"
      footer-hide
      draggable
      class-name="vertical-center-modal"
    >
      <div class="login_list">
        <Input placeholder="输入账号" v-model="from.account" style="width: 100%">
          <Icon type="ios-contact" slot="prefix" />
        </Input>
        <Input placeholder="输入邮箱" style="width: 100%">
          <Icon type="md-at" slot="prefix" />
        </Input>
        <Input placeholder="输入密码" type="password" v-model="from.password" password style="width: 100%">
          <Icon type="ios-medical" slot="prefix" />
        </Input>
        <Input placeholder="再次输入密码" type="password" v-model="from.passwordRepeat" password style="width: 100%">
          <Icon type="ios-medical" slot="prefix" />
        </Input>
        <Poptip trigger="focus" style="width: 150px">
          <Input
            v-model="value15"
            prefix="logo-usd"
            placeholder="输入验证码"
            style="width: 100%"
          />
          <div slot="content">{{ "formatNumber" }}</div>
        </Poptip>
        <div class="code_img">验证码</div>
        <Button long type="primary" @click="loggingFun">注册</Button>
        <Button long @click="loginFun">去登录</Button>
      </div>
    </Modal>
    <!-- <Login ref="loaginRef" />  -->
  </div>
</template>
<script>
import API from "@/api/index";
export default {
  name: "logging",
  components: {},
  data() {
    return {
      modal11: false,
      value15:"",
      from: {
        "account": "",
        "captcha": "111111",
        "password": "",
        "passwordRepeat": "",
        "spread": 0
      }
    };
  },
  computed: {},
  mounted: function () {},
  asyncData(context) {
    return context.$axios.get('ajax/cities')
      .then(res => {
        console.log(res)
      })
  },
  methods: {

    open() {
      this.modal11 = true;
    },
    loggingFun() {
      API.register(this.from).then((res) => {
        console.log(res)
        if( res.code !== 200 ){
          this.$Notice.error({
            title: "注册失败！",
            desc: res.message
          });
        }else{
          this.$store.commit("login/uploginData", res.data);
          API.saveCookie('key',res.data.token,365);
          this.modal10 = false;
          this.$Notice.success({
            title: "注册成功！",
            desc: "注册成功描述文字。 ",
          });
          this.loginFun();
        }
        
      })
      .catch(res=>{
        console.log(res);
      });
    },
    loginFun() {
      this.modal11 = false;
      this.$emit("login");
    //   this.$refs.loaginRef.open();
    },
  },
};
</script>
<style lang="scss">
.logging {
}
.login_list {
  width: 300px;
  display: block;
  margin: 20px auto;
  > div {
    margin-bottom: 10px;
  }
  > button {
    margin-bottom: 10px;
  }
  .code_img {
    width: 140px;
    height: 32px;
    background-color: chocolate;
    display: inline-block;
    float: right;
    text-align: center;
    border-radius: 5px;
    color: #fff;
  }
}
</style>